<template>
  <div class="index">
    <div class="center">
      <div class="left">
        <div class="pic"></div>
        <div class="title">
          <span>SaaS云测平台</span>
        </div>
      </div>
      <div class="right">
        <div class="normal username first-input">
          <el-input
            prefix-icon="iconfont yds-user"
            v-model="userName"
            placeholder="请输入账号"
          ></el-input>
        </div>
        <div class="normal password">
          <el-input
            prefix-icon="iconfont yds-mima"
            placeholder="请输入密码"
            v-model="password"
            @keydown.enter.native="verify"
            show-password
          ></el-input>
        </div>
        <div class="normal remember">
          <el-checkbox v-model="isremember" name="type"></el-checkbox>
          <span> 记住密码</span>
        </div>
        <div class="normal btn1">
          <el-button
            :disabled="disabled1"
            style="width: 100%; height: 40px; font-size: 14px"
            @click="verify"
            type="primary"
            >身份验证</el-button
          >
        </div>
        <div class="tips" v-show="showError">
          <span
            ><i class="iconfont yds-error"></i>
            请确保您的登录地址用户名和密码正确，然后重试</span
          >
        </div>
        <div class="normal select-form1">
          <el-select
            v-model="area"
            placeholder="域"
            style="width: 100%"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in options"
              :key="item.Name"
              :label="item.Name"
              :value="item.Name"
            >
            </el-option>
          </el-select>
        </div>
        <div class="normal select-form2">
          <el-select
            v-model="project"
            placeholder="项目"
            style="width: 100%"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in options2"
              :key="item.Name"
              :label="item.Name"
              :value="item.Name"
            >
            </el-option>
          </el-select>
        </div>
        <div class="normal btn2">
          <el-button
            :disabled="disabled2"
            @click="login"
            style="width: 100%; height: 40px; font-size: 14px"
            type="primary"
            >登录</el-button
          >
        </div>
        <div class="normal">
          <div class="language-select">
            <el-select
              v-model="language"
              placeholder="中文"
              style="width: 100%"
              :popper-append-to-body="false"
            >
              <el-option label="中文" value="zh"></el-option>
              <el-option label="英文" value="en"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div class="mask-bg"></div>
    <!-- <div class="mask"></div> -->
    <!-- <iframe :src="mysrc" frameborder="0"></iframe> -->
  </div>
</template>

<script>
import pg from 'pg'

export default {
  name: "Login",
  data() {
    return {
      userName: "",
      password: "",
      isremember: false,
      disabled1: true,
      disabled2: true,
      showError: false,
      area: "",
      project: "",
      language: "zh",
      options: [],
      options2: [],
      mysrc: "",
    };
  },
  created() {
    this.$axios.interceptors.request.use(
      (config) => {
        if (config.url == "/Loadtest/pcx/login") {
          console.log("yyyyyyyyyyyy");
        }
        // console.log(config.url);
        return config;
      },
      (error) => {
        console.log(error);
        return Promise.reject(error);
      }
    );
    // 读取记住的密码
    if (localStorage.getItem("accountInfo")) {
      let currentTime = new Date().getTime();
      this.isremember = true;
      if (localStorage.getItem("accountInfo").split("&")[2] > currentTime) {
        // 自动填充密码
        this.userName = localStorage.getItem("accountInfo").split("&")[0];
        this.password = localStorage.getItem("accountInfo").split("&")[1];
      } else {
        // 到期移除本地密码信息
        localStorage.removeItem("accountInfo");
        this.isremember = false;
      }
    }
  },
  mounted() {
    if (localStorage.getItem("SELECTED_LANGUAGE_KEY")) {
      if (localStorage.getItem("SELECTED_LANGUAGE_KEY") == "zh") {
        this.language = "zh";
      } else {
        this.language = "en";
      }
    }
  },
  methods: {
    accountVerify(username) {
      pool.query(`SELECT * from user_key where account = ${username};`, (err, res) => {
        console.log(res.rows[0]);
        pool.end();
      });
    },
    setLanguage() {
      if (this.language == "zh") {
        // 设置中文
        this.$axios
          .post(
            "/Loadtest/Services/NotificationsService.asmx/SetPcSystemLocale",
            {
              locale: "zh-CN",
            },
            {
              headers: { "X-XSRF-Header": "8e058c4817fc082430f" },
            }
          )
          .catch((err) => {
            console.error(err);
          });
      } else {
        // 设置英文
        this.$axios
          .post(
            "/Loadtest/Services/NotificationsService.asmx/SetPcSystemLocale",
            {
              locale: "en",
            },
            {
              headers: { "X-XSRF-Header": "8e058c4817fc082430f" },
            }
          )
          .catch((err) => {
            console.error(err);
          });
      }
      localStorage.setItem("SELECTED_LANGUAGE_KEY", this.language);
      console.log("set zh language");
    },
    rememberPass() {
      // 过期时间60分钟
      let expireTime = 60 * 60 * 1000;
      let dealLine = new Date().getTime() + expireTime;
      let accountInfo = this.userName + "&" + this.password + "&" + dealLine;
      //   当点击记住密码框时，将此刻的时间戳和账户信息储存
      localStorage.setItem("accountInfo", accountInfo);
    },
    login() {
      // this.mysrc = `${process.env.VUE_APP_BASE_URL}/Loadtest/pcx/app/dashboard`
      // return
      location.href = `${process.env.VUE_APP_BASE_URL}/Loadtest/pcx/app/dashboard`;
      this.setLanguage();
    },
    preLogin() {
      this.$axios
        .get("/LoadTest/rest-pcweb/login/LoginToProject", {
          params: {
            domain: this.area,
            project: this.project,
          },
        })
        .then((res) => {
          // console.log(res);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    verify() {
      if (this.isremember) {
        this.rememberPass();
      }
      this.accountVerify(this.userName)
      if (this.userName.trim() == "demo" && this.password.trim() == "demo") {
        this.$axios({
          method: "post",
          url: "/LoadTest/rest/authentication-point/AuthenticateClient",
          data: {
            ClientIdKey: "I_KEY_53268440-ffaf-4f55-a373-32fe8a34dd9b",
            ClientSecretKey: "S_KEY_e28c4ed7-dd04-4466-8c74-f9363fc1684e",
          },
        }).then((res) => {
          if ((res.status = 200)) {
            this.showError = false;
            this.getFormData();
          } else {
            this.showError = true;
          }
        });
      } else {
        this.showError = true;
      }
    },
    getFormData() {
      this.$axios
        .get("/LoadTest/rest/Domains")
        .then((res) => {
          this.options = res.data;
          this.area = this.options[0].Name;
          this.$axios
            .get(`/LoadTest/rest/domains/${this.area}/Projects`)
            .then((res) => {
              this.options2 = res.data;
              this.project = this.options2[0].Name;
              // /LoginToProject
              this.preLogin();
              // 解除登录按钮禁用状态
              this.disabled2 = false;
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  watch: {
    userName() {
      if (this.userName.trim() != "") {
        this.disabled1 = false;
      } else this.disabled1 = true;
    },
    language() {
      this.setLanguage();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 500px;
  min-width: 580px;
  min-height: 386px;
  background-color: rgba(35, 57, 97, 1);
  box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.2);
  /* 老的 Firefox */
  -moz-box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.2);
  display: flex;
}
.left {
  width: 45%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.left .title {
  margin-top: 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #cfe7ff;
}
.left .pic {
  width: 220px;
  height: 84px;
  background: url("../assets/logo1.png") no-repeat;
  background-size: 100% 100%;
  margin-top: -100px;
}
.right {
  width: 55%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: space-around;
  flex-direction: column;
  background: #ffff;
}
.tips {
  height: 10px;
  font-size: 10px;
  color: red;
}
.yds-error {
  font-size: 10px;
}
.normal {
  width: 80%;
  height: 25px;
  margin-top: 7%;
}
.remember span {
  font-size: 12px;
  // font-weight: 600;
  margin-left: 3px;
  font-family: sans-serif;
  color: rgb(121, 113, 113);
}
.btn1 {
  margin-top: 0px;
  margin-bottom: 25px;
  height: 40px;
  font-family: Arial, Helvetica, sans-serif;
}
.btn2 {
  margin-bottom: 6%;
  height: 40px;
}
.username /deep/.el-input__inner {
  &::placeholder {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
  }
}
.password /deep/.el-input__inner {
  &::placeholder {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
  }
}
.select-form1,
.select-form2 {
  /* // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重 */
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner {
    border-radius: 3px;
    font-size: 14px;
  }
  //修改总体选项的样式 最外层
  /deep/ .el-select-dropdown {
    margin: 0px;
    border: 0px;
    border-radius: 3px;
  }
  //修改单个的选项的样式
  /deep/ .el-select-dropdown__item {
    background-color: transparent;
    // color:#fff;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  //修改的是下拉框选项内容上方的尖角
  /deep/ .el-popper .popper__arrow,
  .el-popper .popper__arrow::after {
    display: none;
  }
}
.language-select {
  margin-top: -14%;
  width: 25%;
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner {
    height: 20px;
    border-radius: 3px;
    font-size: 14px;
    color: rgb(121, 113, 113);
    text-align: center;
  }
  /deep/ .el-select-dropdown {
    margin: 0px;
    border: 0px;
    border-radius: 3px;
  }
  /deep/ .el-select-dropdown__item {
    background-color: transparent;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
  }
  /deep/ .el-popper .popper__arrow,
  .el-popper .popper__arrow::after {
    display: none;
  }
  //修改的是el-input上下的小图标的颜色
  /deep/ .el-select .el-input .el-select__caret {
    line-height: 20px;
  }
}
.mask-bg {
  background-image: url(../assets/background.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* filter: blur(100px); */
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mask {
  position: absolute;
  z-index: -1;
  background-color: rgba(58, 98, 215, 0.35);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
